<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input动画</title>

    <style>
        body {
            animation: dh 4s infinite;
            transition: all 5s ease;
        }
        
        .inputdiv {
            margin: 200px auto;
            width: 500px;
            height: 150px;
            padding-top: 2px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 30px;
        }
        
        input {
            width: 300px;
            height: 30px;
            border: none;
            position: absolute;
            top: 250px;
            background: transparent;
            border-bottom: 2px solid #c779d0;
            margin-left: 50px;
            outline: none;
        }
        
        span {
            margin: 0;
            position: absolute;
            top: 250px;
            left: 570px;
            font-size: 16px;
            font-weight: 900;
            transition: all 1s ease;
            background: linear-gradient(90deg, #4bc0c8, #c779d0, #feac5e);
            -webkit-background-clip: text;
            color: transparent;
        }
        
        @keyframes dh {
            0% {
                background: linear-gradient(90deg, #feac5e, #c779d0, #4bc0c8, #84fab0);
            }
            25% {
                background: linear-gradient(90deg, #84fab0, #feac5e, #c779d0, #4bc0c8);
            }
            50% {
                background: linear-gradient(90deg, #4bc0c8, #84fab0, #feac5e, #c779d0);
            }
            75% {
                background: linear-gradient(90deg, #c779d0, #4bc0c8, #84fab0, #feac5e);
            }
            100% {
                background: linear-gradient(90deg, #feac5e, #c779d0, #4bc0c8, #84fab0);
            }
        }
    </style>

</head>

<body>


    <div class="inputdiv">
        <span>user</span>
        <input type="text">
    </div>



</body>
<script>
    var input = document.getElementsByTagName('input');
    var h5 = document.getElementsByTagName('span');

    input[0].onfocus = function() {
        h5[0].style.fontSize = '20px';
        h5[0].style.transform = 'translateY(-20px)';
        this.style = 'border-bottom: 2.3px solid #4bc0c8';
        input[0].style.color = '#4bc0c8';
    }


    document.body.addEventListener('keydown', function(e) {
        var flag = e.keyCode;
        console.log(flag);
        if (flag >= 65 && flag <= 70) {
            input[0].style.color = '#4bc0c8';
        }
        if (flag > 70 && flag <= 75) {
            input[0].style.color = '#c779d0';


        }
        if (flag > 76 && flag <= 80) {
            input[0].style.color = '#a18cd1';
        }
        if (flag > 81 && flag <= 85) {

            input[0].style.color = '#feac5e';

        }
        if (flag > 85 && flag <= 90) {

            input[0].style.color = '#d4fc79';

        }
        if (flag > 90 && flag <= 96) {

            input[0].style.color = '#d57eeb';

        }

    });

    input[0].onblur = function() {
        if (input[0].value.length <= 0) {
            h5[0].style.fontSize = '16px';
            h5[0].style.transform = 'translateY(1px)';
            this.style = 'border-bottom: 2px solid #c779d0';
        }

    }
</script>

</html>